<template>
  <div class="home">
    <article>
      <router-link to="/HelloWorld">HelloWorld</router-link> |
      <router-link to="/Text">Text</router-link>
    </article>

    <aside>
      <img alt="Vue logo" src="../assets/logo.png" />
      <router-view>
        <HelloWorld msg="element布局" />
      </router-view>
    </aside>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
// import Text from "@/components/TextText.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
};
</script>
<style scoped lang="scss">
.home {
  height: 100%;
  display: flex;
  justify-content: space-between;
  article {
    padding: 30px;
    border: 1px solid orange;
    width: 400px;
    // height: 100%;
    float: left;
    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
  aside {
    float: left;
    flex: 1;
    border: 1px solid rgb(183, 56, 181);
    // height: 100%;
  }
}
</style>
